<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>菜单</title>
	<style type="text/css">
		*{
			margin:0;
			padding: 0;
		}
		ul{
			text-decoration: none;
			list-style: none;
			border:1px solid black;
			background:black;
			overflow: hidden;
		}
		li{
			float:left;
			padding:0 100px;
			margin:0 5px;
			/*color:white;*/
			border:1px solid white;
		}
		a:link{
			color:white;
		}
		a:visited{
			color:grey;
		}
		a:hover{
			color: green;
		}

		a:active{
			color:red;
		}
		

	</style>
</head>
<body>
	<ul>
		<li><a href="">主页</a></li>
		<li><a href="">商城</a></li>
		<li><a href="">售后</a></li>
		<li><a href="">关于</a></li>
	</ul>
</body>
<script>
var li = document.getElementsByTagName("li");
// console.log(li[0]);
// console.log(li.length);

for(i=0;i<li.length;i++){
	
	li[i].addEventListener("mouseover",li[i].style.background='pink');
	li[i].addEventListener("mouseout",li[i].style.background="black");

}

// for(var i=0;i<li.length;i++){
// 	li[i].onmouseover=function(){
// 		li[i].id="on";
// 	}

</script>
</html>